<div dReadTip [readTipOptions]="readTipOptions" class="readtip-container" [contentTemplate]="contentTemplate">
  <h1>You can also pass in template</h1>
  <p class="readtip-content">Write your own template</p>
  <p>The following is the target you want to show readtip</p>
  <h4 class="readtip-target">DEVUI Course</h4>
  <h4 class="readtip-target">Another DEVUI Course with same class name</h4>
</div>

<ng-template #contentTemplate>
  <d-card style="width: 350px">
    <d-card-header>
      <d-avatar dCardAvatar [name]="'DevUI'"></d-avatar>
      <d-card-title>DEVUI Course</d-card-title>
      <d-card-subtitle><i class="icon-company-member card-icon"></i><span>DevUI</span></d-card-subtitle>
    </d-card-header>
    <d-card-content>
      DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are
      based on...
    </d-card-content>
    <d-card-actions [align]="'start'">
      <div class="card-block"><i class="icon-like card-icon"></i><span>12</span></div>
      <div class="card-block"><i class="icon-star-o card-icon"></i><span>8</span></div>
      <div class="card-block"><i class="icon-message card-icon"></i><span>8</span></div>
    </d-card-actions>
  </d-card>
</ng-template>
